<template>
  <div>
    <el-row :gutter="30">
      <el-col :sm="24">
        <el-row>
          <el-col :sm="24" class="text-left title ">
            <i class="el-icon-message"></i>&nbsp;【RSocket】WebSocket信息交互
            <div class="block-line">&nbsp;</div>
          </el-col>
        </el-row>
        <el-form ref="form" :model="form" label-width="100px" :rules="rules"
          label-position="right" size="small" :inline-message="true">
          <el-form-item label="消息：" :sm="4" prop="message">
            <el-col :sm="15" style="text-align:left;">
              <el-input v-model="form.message" placeholder="请输入消息内容" suffix-icon="el-icon-info"></el-input>
            </el-col>
            <el-col :sm="4">
              <el-button type="primary" @click="submitForm">发送</el-button>
            </el-col>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :sm="1">&nbsp;</el-col>
      <el-col :sm="23">
        <p v-for="res in results" :key="res" style="text-align: left; padding: -50;">
          <el-tag type="danger"><i class="el-icon-loading"></i>&nbsp;{{ res }}</el-tag></p>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { RSocketClient } from 'rsocket-core' // 导入组件
import RSocketWebSocketClient from 'rsocket-websocket-client' // 导入组件
const client = new RSocketClient({ // RSocket客户端实例
  setup: { // 环境配置
    keepAlive: 60000, // 活动帧之间的间隔
    lifetime: 180000, // 未收到信息的存活时间
    dataMimeType: 'application/json', // 数据MIME类型
    metadataMimeType: 'message/x.rsocket.routing.v0' // 元数据MIME类型
  },
  transport: new RSocketWebSocketClient({ // RSocket传输配置
    url: 'ws://localhost:6969/websocket' // WebSocket地址
  })
})
export default {
  data () { // 页面数据
    return {
      results: [], // 保存数据结果集
      socket: null, // 保存RSocket实例
      form: { // 表单数据
        message: '' // 发送数据
      },
      rules: { // 验证规则
        message: [
          { required: true, message: '请输入消息内容', trigger: 'blur' }
        ]
      }
    }
  },
  methods: { // 操作函数
    submitForm () { // 表单提交函数
      this.$refs['form'].validate((valid) => { // 表单验证
        if (valid) { // 验证成功
          this.socket // RSocket请求
            .requestResponse({ // request-and-response模式
              data: this.form.message, // 传输数据
              metadata: String.fromCharCode('message.echo'.length) + 'message.echo' // 消息处理路径
            })
            .then((payload) => { // 数据接收
              this.results.push(payload.data) // 数据保存
            }, (e) => console.log(e)) // 错误输出
          this.$refs['form'].resetFields() // 表单重置
        } else {
          return false
        }
      })
    }
  },
  mounted () { // 页面挂载
    client.connect().then(socket => { // 连接服务端
      this.socket = socket // 保存对象实例
    })
  }
}
</script>
